<template>
<div>
	<Card  dis-hover>
		<p slot="title">管理商品</p>
		<div pd2>
			<p>
				<Button size="small" @click="handleShowCreateCommodityModal(null)">添加商品</Button>
				<Button size="small" mgl1 @click="handleDeleteBatch">批量删除</Button>
			</p>
			<AutoTable ref="auto-table" action="/api/services/app/Commodity/Search" :columns="columns" :query="query" :buttons="buttons" mgt1></AutoTable>
		</div>
	</Card>
	<create-commodity v-model="showCreateCommodityModal" :model="model"  @save-success="getpage"></create-commodity>
	<shopping-options v-model="showShoppingOptionsModal" :model="model"></shopping-options>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoTable from "@common/components/AutoTable.vue";
import CreateCommodity from './create-commodity.vue'
import Commodity from '@common/store/entities/commodity';
import ShoppingOptions from './shopping-options.vue';

@Component({
	components:{AutoTable, CreateCommodity, ShoppingOptions }
})
export default class CommodityManager extends AbpBase {
	showCreateCommodityModal:boolean=false;
	showShoppingOptionsModal:boolean=false;
	model:any = this.getDefaultModel();
	getDefaultModel() {
		return new Commodity();
	}
	get buttons() {
		return ['search','search_all']
	}
	get query() {
		var commodityWareOptions = this.$store.state.setting.settings.commodityWares.reduce((result, elem) => { 
			result.push({ value: elem.id, label: elem.name });
			return result;
		}, [{ value: 0, label: "全部" }]);
		return { // 查询条件
			searchTarget: { type: "select", default: "name", options: [
					{ value: "id", label: "商品ID" },
					{ value: "name", label: "商品名称" },
					{ value: "tag", label: "商品标签" },
			] },
			search: { type: "input", placeholder: "关键字" },
			commodityWareId: { type: "select", label: "产品库:", default: 0, placeholder: "未选择", options: commodityWareOptions },
			// splb: { type: "nestselect", label: "商品分类:", default: [], placeholder: "未选择", options: [
			// 		{ value: "0", label: "全部" },
			// 		{ value: "3", label: "个人" },
			// 		{ value: "4", label: "企业" },
			// 		{ value: "5", label: "服务机构", children: [
			// 			{ value: "7", label: "机构1" },
			// 			{ value: "8", label: "机构2", children: [
			// 				{ value: '9', label: '部门1'},
			// 				{ value: '10', label: '部门2'},
			// 			] },
			// 			{ value: "11", label: "机构3" },
			// 		] }
			// ] },
			// gwxx: { type: "select", label: "购物选项:", default: "0", placeholder: "未选择", options: [
			// 		{ value: "0", label: "全部" },
			// ] },
			// sjzt: { type: "select", label: "上架状态:", default: "0", placeholder: "未选择", options: [
			// 		{ value: "0", label: "全部" },
			// 		{ value: "1", label: "上架" },
			// 		{ value: "2", label: "未上架" },
			// ] },
			//begin_time: { type: "date", label: "日期:", placeholder: "选择开始时间" },
			//end_time: { type: "date", placeholder: "选择截止时间", handleValue: value => { return value + 24*60*60*1000 } },
		};
	}
	get columns() {
		return [
			{
				type: 'selection', width: 50, align: 'center'
			},
			{
				title: '货物编号', align: 'center', key: 'id'
			},
			{
				title: '商品名称', align: 'center', key: 'name'
			},
			{
				title: '商品分类', align: 'center', render: (h, params) => {
					return h('div', params.row.classes.toString());
				}
			},
			{
				title: '添加时间', align: 'center', render: (h, params) => {
					return h('div', this.formatTimeStr(params.row.creationTime));
				}
			},
			{
				title: '库存数', align: 'center', key: 'inventory', width: 100
			},
			{
				title: '上架', align: 'center', width: 50, render: (h, params) => {
					return h('Checkbox', { 
						props: { 
							value: params.row.shelved 
						},
						on: {
							'on-change': (value) => { this.handleChangeShelved(params.row.id, value); }
						}
					});
				}
			},
			{
				title: '操作', key: 'action', align: 'center', width: 220, render: (h, params) => {
					return h('div', [
						h('Button', {
							props: { type: 'primary', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => { this.handleShowCreateCommodityModal(params.row); } }
						}, '编辑'),
						h('Button', {
							props: { type: 'primary', size: 'small', disabled: !params.row.isEnabledShoppingOption },
							style: { marginRight: '5px' },
							on: { click: () => { this.handleShowShoppingOptionsModal(params.row); } }	
						}, '编辑购物选项'),
						h('Button', {
							props: { type: 'error', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleDelete(params.row.id);
							} }
						}, '删除')
					]);
				}
			}
		]
	}
	async handleShowCreateCommodityModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
		}else {
			var response = await this.get('Commodity/Get', { id: item.id });
			if(response.success) {
				this.model = response.result;
			}else {
				return;
			}
		}
		this.showCreateCommodityModal = true;
	}
	handleShowShoppingOptionsModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
		}else {
			this.model = item;
		}
		this.showShoppingOptionsModal = true;
	}
	handleDelete(id:Number) {
		this.confirm('确认删除该商品吗？', async () => {
			var response = await this.post('Commodity/Delete', { id: id });
			if(response.success) {
				this.getpage();
			}
		});
	}
	async handleDeleteBatch() {
		var selection = (this.$refs["auto-table"] as any).table.getSelection();
		if(selection.length == 0) {
			this.confirm('未选中任何商品', () => {});
			return;
		}
		this.confirm(`确认要删除选中的${selection.length}件商品吗`, async () => {
			var ids = selection.map(elem => elem.id);
			var response = await this.post('Commodity/Delete', { ids: ids });
			if(response.success) {
				this.getpage();
			}
		});
	}
	async handleChangeShelved(id, value) {
		if(value == true) {
			await this.post('Commodity/Shelved', { id: id });
		}else {
			await this.post('Commodity/NotShelved', { id: id });
		}
	}
	getpage() {
		(this.$refs["auto-table"] as any).getData();
	}
}
</script>